<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>產品類別管理</title>
<%@ include file="/common/header.jsp" %>
<link rel="stylesheet" href="${ctx}/extends/zTree/zTreeStyle/zTreeStyle.css?_=${radom}" type="text/css" media="screen" />
<style type="text/css">
.tab-content input,.editable {
	float: left;
}

.tab-content .subCategory {
	padding: 5px 10px;
}

.tab-content  li {
	vertical-align: middle;
}

.tab-content h4 {
	padding: 0;
}

.category-buttons {
	text-align: center;
	padding-top: 5px;
}

#main-content ul {
	padding: 0 0;
}

#main-content ul li {
	background:url();
	list-style-type: none;
}

ul.ztree {
	border: 1px solid #617775;
	background: #f0f6e4;
	width: 100%;
	height: 360px;
	overflow-y: scroll;
	overflow-x: auto;
}

.ztree li span.button.add {
	margin-left: 2px;
	margin-right: -1px;
	background-position: -144px 0;
	vertical-align: top;
	*vertical-align: middle
}
/*
.ztree li span.button.switch.level0 {
	visibility: hidden;
	width: 1px;
}

.ztree li ul.level0 {
	padding: 0;
	background: none;
}*/

.zh-category,.en-category {
	display: none;
}

.defaultForm {
	display: block;
}

input.rename{
	width: 80%;
}
</style>
    <!-- Page Head -->
    <div class="content-box">
          <div class="content-box-header">
	      	<h3>產品類別管理</h3>  
	      </div>
	      <!-- End .content-box-header -->
	      <div class="content-box-content">
            <p>
              <label for="languageId" >Language：</label>
              <select name="languageId"  id="languageId">
              	<c:forEach items="${language }"  var="l">
              		<option value="${l.languageId }"   data-key="${l.languageKey }" <c:if test="${l.languageKey eq defaultForm}">selected='selected'</c:if>>${l.languageName }</option>
              	</c:forEach>
              </select>
            </p>
             <!--  begin zh-category -->		
            <div class="zh-category <c:if test="${defaultForm eq 'zh'}">defaultForm</c:if>">
		      	<fieldset class="column-left">	      
					<ul id="zh_services" class="ztree"></ul>
				</fieldset>
				<fieldset class="column-right">
					<ul id="zh_product" class="ztree"></ul>
				</fieldset>
				 <div class="clear"></div>
			</div>
		     <!--  end zh-category -->
		     <!--  begin en-category -->			     
			 <div class="en-category <c:if test="${defaultForm eq 'en'}">defaultForm</c:if>">
		      	<fieldset class="column-left">	      
					<ul id="en_services" class="ztree"></ul>
				</fieldset>
				<fieldset class="column-right">
					<ul id="en_product" class="ztree"></ul>
				</fieldset>
				 <div class="clear"></div>
			 </div>
		       <!--  end en-category -->
		     <div class="category-buttons"><p>
             			<input class="button submit" type="button" value="Submit" />
          		 	</p>
           	 </div>
	      </div>
     </div>
    <!-- End .content-box -->
    <div class="clear"></div>
 <%@ include file="/common/footer.jsp" %>
  <script type="text/javascript" src="${ctx}/extends/jquery.editable-1.3.3.js?_=${radom}"></script>
  <script type="text/javascript" src="${ctx}/extends/jquery.json-2.3.js?_=${radom}"></script>
    <script type="text/javascript" src="${ctx}/extends/zTree/jquery.ztree.all-3.5.min.js?_=${radom}"></script>
 <script type="text/javascript" src="${ctx}/js/productCategory2.js?_=${radom}"></script>
  <script type="text/javascript">
 $(function(){
	 $("#main-nav a[data-menu='product']").addClass("current").click();
	 $("#main-nav a[data-menu='category']").addClass("current");
		// Check all checkboxes when the one in a table head is checked:			
		$('.check-all').click(function(){
			$(this).parents("fieldset").find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
		})
 })
 </script>